const Home={
  template:`
  <div>
  <x-header>{{$route.meta.title}}</x-header>
  <div class="main">
  <div class="shouye" id="shouye">
    <x-swiper :data="slides" pager autoplay></x-swiper>
    <div class="four">
      <div class="four-icon">&#xe610;<span>官方正品</span></div>
      <div class="four-icon">&#xe61e;<span>顺丰极速达</span></div>
      <div class="four-icon">&#xe654;<span>全国联保</span></div>
      <div class="four-icon">&#xe600;<span>镭雕定制</span></div>
    </div>
    <div class="newproduct">
      <p id="topic"><span></span>新品专区<span></span></p>
      <div class="product"></div>
    </div>
    <div class="group-buying">
      <p id="topic"><span></span>超值拼团<span></span></p>
  <div id="goodbox">
      <div id="goods">
        <div id="oncegoods" class="oncegoods" v-for="good in goods">
          <img :src="good.img" alt="">
          <p class="name">{{good.name}}</p>
          <p class="function">{{good.funcion}}</p>
          <p class="group-price">拼团价:<span>￥</span><span>{{good.price}}</span></p>
          <p class="through-price">￥{{good.price1}}</p>
        </div>
      </div>
    </div>
    </div>
    <div id="more">查看更多<span>&#xe636;</span></div>
    <div id="hotphone">
      <p id="topic"><span></span>热销机型<span></span></p>
      <div id="oncephone" v-for="goods in phone" :key="goods.id">
        <img :src="goods.img" alt="">
        <p class="phonename">{{goods.name}}</p>
        <p class="phonefuncion">{{goods.funcion}}</p>
        <p class="phoneprice"><span>￥</span>{{goods.price}}</p>
      </div>
    </div>
    <div id="more">查看更多<span>&#xe636;</span></div>
    <div id="hotphone">
      <p id="topic"><span></span>精选保护<span></span></p>
      <div id="oncephone" v-for="item in protect" :key="item.id">
        <img :src="item.img" alt="">
        <p class="phonename">{{item.name}}</p>
        <p class="phonefuncion">{{item.function}}</p>
        <p class="phoneprice"><span>￥</span>{{item.price}}</p>
      </div>

    </div>
    <div id="more" class="last">查看更多<span>&#xe636;</span></div>
    
  </div>
  </div>
  <x-tabbar :data="navs"></x-tabbar>

  </div>

  `,
  data(){
    return{
      timer: null,
      navs:[
        {id:1, name:'首页',href:'/Home',icon:'van-icon-wap-home-o'},
        {id:2, name:'全部分类',href:'/Classify',icon:'van-icon-apps-o'},
        {id:3, name:'我的',href:'/My',icon:'van-icon-contact'},
      ],
      slides:[
        {id:1,picurl:'image/slide1.jpg',path:''},
        {id:2,picurl:'image/slide2.jpg',path:''},
        {id:3,picurl:'image/slide3.jpg',path:''},
      ],
      protect:[
        {id:1,name:'X30 Pro手机保护壳',funcion:'奇境系列设计 | 精准适应机型',price:29,img:'image/4.png'},
        {id:2,name:'X30 Pro手机保护壳',funcion:'奇境系列设计 | 精准适应机型',price:29,img:'image/4.png'},
        {id:3,name:'X30 Pro手机保护壳',funcion:'奇境系列设计 | 精准适应机型',price:29,img:'image/4.png'},
        {id:4,name:'X30 Pro手机保护壳',funcion:'奇境系列设计 | 精准适应机型',price:29,img:'image/4.png'},
        {id:5,name:'X30 Pro手机保护壳',funcion:'奇境系列设计 | 精准适应机型',price:29,img:'image/4.png'},
        {id:6,name:'X30 Pro手机保护壳',funcion:'奇境系列设计 | 精准适应机型',price:29,img:'image/4.png'},
      ],
      phone:[
        {id:1,name:'vivo  Y51s',funcion:'双模5G全网通',price:1798,img:'image/3.png'},
        {id:2,name:'vivo  Y51s',funcion:'双模5G全网通',price:1798,img:'image/3.png'},
        {id:3,name:'vivo  Y51s',funcion:'双模5G全网通',price:1798,img:'image/3.png'},
        {id:4,name:'vivo  Y51s',funcion:'双模5G全网通',price:1798,img:'image/3.png'},
        {id:5,name:'vivo  Y51s',funcion:'双模5G全网通',price:1798,img:'image/3.png'},
        {id:6,name:'vivo  Y51s',funcion:'双模5G全网通',price:1798,img:'image/3.png'},
      ],
      goods:[
        {id:1,name:'vivo 2A USB数据线',funcion:'支持18W/10W双引擎闪充',price:9.9,img:'image/2.png',price1:19},
        {id:2,name:'vivo 2A USB数据线',funcion:'支持18W/10W双引擎闪充',price:9.9,img:'image/2.png',price1:19},
        {id:3,name:'vivo 2A USB数据线',funcion:'支持18W/10W双引擎闪充',price:9.9,img:'image/2.png',price1:19},
        {id:4,name:'vivo 2A USB数据线',funcion:'支持18W/10W双引擎闪充',price:9.9,img:'image/2.png',price1:19},
        {id:5,name:'vivo 2A USB数据线',funcion:'支持18W/10W双引擎闪充',price:9.9,img:'image/2.png',price1:19},
        {id:6,name:'vivo 2A USB数据线',funcion:'支持18W/10W双引擎闪充',price:9.9,img:'image/2.png',price1:19},
        {id:7,name:'vivo 2A USB数据线',funcion:'支持18W/10W双引擎闪充',price:9.9,img:'image/2.png',price1:19},
      ]
      
    }
    
  },
  mounted(){
    // var translate = 0;
    // document.getElementById('goods').ontouchstart = function (ev) {
    //   var goods = document.querySelectorAll('.oncegoods');
    //   var len = goods.length;
    //   var goodsx = document.getElementById('goods').offsetWidth;
    //   var oncegoodswidth = document.getElementById('oncegoods').offsetWidth;
    //   var touch = ev.touches[0];//获取开始的位置数组的第一个触摸位置
    //   startx = Math.floor(touch.pageX);//获取第一个坐标的X轴
    //   document.ontouchmove = function (ev) {
    //     var touch = event.touches[0];
    //     movex = Math.floor(touch.pageX);
    //     nx = movex - startx;//获取开始位置和离开位置的距离
    //     //判断滑动方向
    //     if (nx > 0) {
    //       translate += 10;
    //       if (-translate < 0) translate = 0;
    //       this.style.transform = 'translate(' + translate + 'px)';
    //     } else {
    //       translate -= 10;
    //       if (-translate > (len * oncegoodswidth - goodsx + 20)) translate = -(len * oncegoodswidth - goodsx + 20);
    //       this.style.transform = 'translate(' + translate + 'px)';
    //     }
    //   }.bind(this);
    //   document.ontouchend = function () {
    //     document.ontouchmove = null;
    //   };
    // }
  },
  destroyed(){
    clearInterval(this.timer);
    console.log(11);
  }
}